<template>
    <div>
<!--        搜索框-->
        <div>
            <!-- 下拉选择框，选择订单类型 -->
            <el-select v-model="searchMode" placeholder="请选择订单类型" style="width: 150px; margin-right: 10px">
                <el-option value="已支付" label="已支付"></el-option>
                <el-option value="已发货" label="已发货"></el-option>
                <el-option value="已收货" label="已收货"></el-option>
            </el-select>

            <!-- 输入框，输入搜索关键字 调用load-->
            <el-input v-model="searchText" @keyup.enter.native="load" style="width: 200px">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>

            <!-- 重置按钮，点击重置搜索条件 -->
            <el-button @click="reset" type="warning" style="margin: 10px">重置</el-button>

            <!-- 搜索按钮，点击进行搜索操作 -->
            <el-button @click="load" type="primary" style="margin: 10px">搜索</el-button>
        </div>

<!--        数据显示-->
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="50" sortable> </el-table-column>
            <el-table-column prop="orderNo" label="订单编号" width="200"></el-table-column>
            <el-table-column prop="totalPrice" label="总价" width="100"></el-table-column>
            <el-table-column prop="userId" label="下单人id" width="100"></el-table-column>
            <el-table-column prop="linkUser" label="联系人" width="150"></el-table-column>
            <el-table-column prop="linkPhone" label="联系电话"></el-table-column>
            <el-table-column prop="linkAddress" label="送货地址" width="300"></el-table-column>
            <el-table-column prop="state" label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.state==='已支付'">{{scope.row.state}}</el-tag>
                    <el-tag type="primary" v-if="scope.row.state==='已发货'">{{scope.row.state}}</el-tag>
                    <el-tag type="info" v-if="scope.row.state==='已收货'">{{scope.row.state}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间"></el-table-column>
<!--            操作-->
            <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
<!--                slot-scope="scope允许访问每一行的内容-->
                <el-button type="primary" size="mini"  @click="showDetail(scope.row)">详情</el-button>
<!--                带有确认操作的弹出框-->
<!--                scope.row获取当前行的数据-->
                <el-popconfirm
                        @confirm="delivery(scope.row)"
                        title="确定发货吗？"
                        v-if="scope.row.state==='已支付'"
                >
                    <el-button type="primary" size="mini" slot="reference" style="margin-left: 10px">发货</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>

        </el-table>
        <!--    分页-->
        <div style="margin-top: 10px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :page-sizes="[3, 5, 8, 10]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >
            </el-pagination>
        </div>
<!--        详情弹出框-->
        <el-dialog :visible.sync="dialogFormVisible">
            <el-table :data="detail" background-color="black">
                <el-table-column  label="图片" width="150" >
                    <template   slot-scope="scope">
                        <img :src="scope.row.img"  min-width="100" height="100" />
                    </template>
                </el-table-column>
                <el-table-column prop="goodId" label="商品id"  ></el-table-column>
                <el-table-column prop="goodName" label="商品名称"  ></el-table-column>
                <el-table-column prop="standard" label="商品规格"  ></el-table-column>
                <el-table-column prop="count" label="商品数量"  ></el-table-column>
                <el-table-column prop="price" label="单价"  ></el-table-column>
                <el-table-column prop="discount" label="折扣"></el-table-column>
                <el-table-column label="实价" >
                    <template slot-scope="scope">
                        {{sumPrice(scope.row)}}
                    </template>
                </el-table-column>
            </el-table>


        </el-dialog>

    </div>
</template>

<script>
    import API from '../../utils/request'
    const url = "/api/order/"
    export default {
        name: "Order",
        data(){
            return{
                searchMode: '',
                searchText: '',
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                //要传给后端地参数
                total: 0,
                dialogFormVisible:false,
                detail:[],
            }
        },
        created() {
            this.load()
        },
        computed:{
            //订单总价，小数点后2位
            // sumPrice: function (row){
            //
            //     return row.price * row.discount;
            // },

            sumPrice() {

                return (row) => (row.price * row.discount).toFixed(2);
            },


        },
        methods:{
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum
                this.load()
            },
            load() {
                API.get(url + "/page", {
                    //传递一些参数作为程序参数页码、每页条目数、订单编号和订单状态
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        orderNo: this.searchText,
                        state: this.searchMode
                    }
                }).then(res => {
                    //从API中获取到的数据中提取订单记录给data，显示表格和总数
                    this.tableData = res.data.records || []
                    console.log(res)
                    this.total = res.data.total
                })
            },
            reset(){
                this.searchMode = '';
                this.searchText = '';
                this.load()
            },
            //发货
            delivery(order){
                this.request.get("/api/order/delivery/"+order.orderNo).then(res=>{
                    if(res.code==='200'){
                        this.$message.success("成功发货");
                        order.state = '已发货'
                    }
                })
            },
            //弹窗方法
            showDetail(row){
                //传入订单号  detail是弹窗的data
                this.request.get("/api/order/orderNo/"+row.orderNo).then(res=>{
                    if(res.code==='200'){
                        console.log(res)
                        this.detail=[];
                        this.detail.push(res.data);
                        //弹窗
                        this.dialogFormVisible = true;
                    }
                })
            },


        },

    }
</script>

<style scoped>

</style>